<template>
  <div>
    <section class="haruyuki-bg-color-white">
      <el-alert v-if="basicData.auditResult" title="审核备注：" :description="basicData.auditResult" type="error">
      </el-alert>
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-user"></i><span class="haruyuki-ml-6">{{ labelData.basicTitle }}</span>
        </div>
        <div>
          <el-button type="primary" icon="el-icon-edit" size="small" v-if="isStartNode && permission.service_info_edit" @click="getBasicEdit(basicData)">修 改</el-button>
        </div>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="24">
            <span>服务商名称：{{ basicData.serviceName }}</span>
          </el-col>
          <!-- <el-col :span="8">
            <span>服务商类型：{{ basicData.serviceTypeName }}</span>
          </el-col> -->
          <el-col :span="8">
            <span>联系人名称：{{ basicData.contactName }}</span>
          </el-col>
          <el-col :span="8">
            <span>联系方式：{{ basicData.contactNumber }}</span>
          </el-col>
          <el-col :span="8">
            <span>联系邮箱：{{ basicData.email }}</span>
          </el-col>
          <el-col :span="8">
            <span>所在区域：{{ basicData.provinceName }}/{{ basicData.cityName }}/{{ basicData.areaName }}</span>
          </el-col>
          <el-col :span="8">
            <span>经营地址：{{ basicData.address }}</span>
          </el-col>
          <el-col :span="8">
            <span>创建日期：{{ basicData.createTime }}</span>
          </el-col>
          <el-col :span="8">
            <span>结算模式：{{ basicData.settlementModeName }}</span>
          </el-col>
          <el-col :span="8">
            <span>合作状态：{{ basicData.isCooperateName }}</span>
          </el-col>
          <el-col :span="8">
            <span>分润状态：{{ basicData.profitStateName }}</span>
          </el-col>
          <el-col :span="8">
            <span>合同状态：{{ basicData.cooperateStateName }}</span>
          </el-col>
          <el-col :span="8">
            <span>登录状态：{{ basicData.loginStatusName }}</span>
          </el-col>
          <el-col :span="8">
            <span>开商户状态：{{ basicData.openMerchantStatusName }}</span>
          </el-col>
          <el-col :span="8">
            <span>提现状态:{{ basicData.withdrawStatusName }}</span>
          </el-col>
          <el-col :span="8" v-if="basicData.exceptionMsg">
            <span>异常状态原因：{{ basicData.exceptionMsg }}</span>
          </el-col>
          <el-col :span="8" v-if="basicData.remark">
            <span>备注：{{ basicData.remark }}</span>
          </el-col>
        </el-row>
      </div>
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-postcard"></i><span class="haruyuki-ml-6">{{ labelData.mainTitle }}</span>
        </div>
        <el-button type="primary" icon="el-icon-edit" size="small" v-if="isStartNode && permission.service_info_edit && basicData.isAuth == 0 && mainData.roaStatus != 0" @click="getMainEdit(mainData)">修 改</el-button>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="24">
            <span>服务商类型：{{ basicData.serviceTypeName }}</span>
          </el-col>
          <el-col :span="8" v-if="basicData.serviceType == 1 || basicData.serviceType == 2">
            <span>公司名称：{{ mainData.compName }}</span>
          </el-col>
          <el-col :span="8" v-if="basicData.serviceType == 1 || basicData.serviceType == 2">
            <span>营业执照编号：{{ mainData.roaLicenseNo }}</span>
          </el-col>
          <el-col :span="8" v-if="basicData.serviceType == 1 || basicData.serviceType == 2">
            <span>营业执照注册地址：{{ mainData.businessAddress }}</span>
          </el-col>
          <el-col :span="8" v-if="basicData.serviceType == 1 || basicData.serviceType == 2">
            <span>营业执照开始日期：{{ getYearMonth(mainData.roaLicenseStartTime) }}</span>
          </el-col>
          <el-col :span="8" v-if="basicData.serviceType == 1 || basicData.serviceType == 2">
            <span>营业执照截止日期：{{ getYearMonth(mainData.roaLicenseTime) }}</span>
          </el-col>
          <el-col :span="8">
            <span>法人名称：{{ mainData.roaName }}</span>
          </el-col>
          <el-col :span="8">
            <span>身份证号：{{ mainData.roaCardNo }}</span>
          </el-col>
          <el-col :span="8">
            <span>法人身份证开始时间：{{ getYearMonth(mainData.roaCardStartTime) }}</span>
          </el-col>
          <el-col :span="8">
            <span>法人身份证截止时间：{{ getYearMonth(mainData.roaCardTime) }}</span>
          </el-col>
          <!-- <el-col :span="8">
            <span>法人身份证有效期00：至 {{getYearMonth(mainData.roaCardTime)}}</span>
          </el-col> -->
          <!-- <el-col :span="8">
            <span>身份证所在市区00：</span>
          </el-col>
          <el-col :span="8">
            <span>身份证地址00：</span>
          </el-col> -->
        </el-row>
        <el-row :gutter="20">
          <!-- <el-col :span="24">
            <span>认证照片：</span>
          </el-col> -->
          <el-col :span="8" v-if="basicData.serviceType == 1 || basicData.serviceType == 2">
            <div class="haruyuki-image-preview">
              <div class="image-preview-title">营业执照照片</div>
              <div class="haruyuki-image">
                <el-image style="width: 100%; height: 100%" :src="mainData.roaLicenseImageUrl" z-index="5000" :preview-src-list="[mainData.roaLicenseImageUrl]" fit="contain">
                </el-image>
                <span class="haruyuki-text">营业执照照片</span>
              </div>
            </div>
          </el-col>
          <el-col :span="8" v-if="basicData.serviceType == 0">
            <div class="haruyuki-image-preview">
              <div class="image-preview-title">法人手持身份证</div>
              <div class="haruyuki-image">
                <el-image style="width: 100%; height: 100%" :src="mainData.roaCardHeldUrl" z-index="5000" :preview-src-list="[mainData.roaCardHeldUrl]" fit="contain">
                </el-image>
                <span class="haruyuki-text">法人手持身份证</span>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="haruyuki-image-preview">
              <div class="image-preview-title">法人身份证人像面</div>
              <div class="haruyuki-image">
                <el-image style="width: 100%; height: 100%" :src="mainData.roaCardPositiveUrl" z-index="5000" :preview-src-list="[mainData.roaCardPositiveUrl]" fit="contain">
                </el-image>
                <span class="haruyuki-text">法人身份证人像面</span>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="haruyuki-image-preview">
              <div class="image-preview-title">法人身份证国徽面</div>
              <div class="haruyuki-image">
                <el-image style="width: 100%; height: 100%" :src="mainData.roaCardBackUrl" z-index="5000" :preview-src-list="[mainData.roaCardBackUrl]" fit="contain">
                </el-image>
                <span class="haruyuki-text">法人身份证国徽面</span>
              </div>
            </div>
          </el-col>
        </el-row>

      </div>
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-bank-card"></i><span class="haruyuki-ml-6">{{ labelData.cardTitle }}</span>
        </div>
        <el-button type="primary" icon="el-icon-edit" size="small" v-if="isStartNode && permission.service_info_edit && basicData.isBankAuth == 0 && cardData.robStatus != 0" @click="getCardEdit(cardData)">修 改</el-button>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <span>开户行名称：{{ cardData.robBank }}</span>
          </el-col>
          <el-col :span="8">
            <span>开户支行名称：{{ cardData.robBankBranch }}</span>
          </el-col>
          <!-- <el-col :span="8">
            <span>账户名称：{{ cardData.robBankName }}</span>
          </el-col> -->
          <el-col :span="8">
            <span>银行账号：{{ cardData.robBankNo }}</span>
          </el-col>
          <!-- <el-col :span="8" v-if="cardData.bankMobile"> -->
          <el-col :span="8">
            <span>银行预留手机号：{{ cardData.bankMobile }}</span>
          </el-col>
          <el-col :span="16" v-if="cardData.areaName">
            <span>开户行所在地址：{{ cardData.provinceName }}/{{ cardData.cityName }}/{{ cardData.areaName }}</span>
          </el-col>

        </el-row>
        <el-row :gutter="20">
          <!-- <el-col :span="24">
            <span>认证照片：</span>
          </el-col> -->
          <el-col :span="8" v-if="basicData.serviceType != 0">
            <div class="haruyuki-image-preview">
              <div class="image-preview-title">对公开户证明</div>
              <div class="haruyuki-image">
                <el-image style="width: 100%; height: 100%" :src="cardData.robCardPublicImgUrl" z-index="5000" :preview-src-list="[cardData.robCardPublicImgUrl]" fit="contain">
                </el-image>
                <span class="haruyuki-text">对公开户证明</span>
              </div>
            </div>
          </el-col>
          <el-col :span="8" v-if="basicData.serviceType == 0">
            <div class="haruyuki-image-preview">
              <div class="image-preview-title">结算卡正面</div>
              <div class="haruyuki-image">
                <el-image style="width: 100%; height: 100%" :src="cardData.robBankPositiveUrl" z-index="5000" :preview-src-list="[cardData.robBankPositiveUrl]" fit="contain">
                </el-image>
                <span class="haruyuki-text">结算卡正面</span>
              </div>
            </div>
          </el-col>
          <el-col :span="8" v-if="basicData.serviceType == 0">
            <div class="haruyuki-image-preview">
              <div class="image-preview-title">结算卡反面</div>
              <div class="haruyuki-image">
                <el-image style="width: 100%; height: 100%" :src="cardData.robBankBackUrl" z-index="5000" :preview-src-list="[cardData.robBankBackUrl]" fit="contain">
                </el-image>
                <span class="haruyuki-text">结算卡反面</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-cpu"></i><span class="haruyuki-ml-6">{{ labelData.aisleTitle }}</span>
        </div>
        <div v-if="basicData.parentServiceNo == '0'">
          <!-- <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            v-if="isStartNode && permission.service_info_edit"
            @click="getPolicyEdit()"
            >修改结算价</el-button
          > -->
          <el-button type="primary" icon="el-icon-edit" size="small" v-if="isStartNode && permission.service_info_edit" @click="getAisleEdit(aisleList)">分配通道</el-button>
        </div>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="6" v-for="(item, index) in aisleList" :key="index">
            <!-- <div @click.stop="getPolicyEdit(item.aisleCode)"> -->
            <div @click.stop="getPolicyEdit(item.aisleCode)">
              <span class="haruyuki-color-primaryblue cursor-pointer">{{
                item.aisleName
              }}</span>
              <span class="haruyuki-color-silverGray haruyuki-size-14" v-if="item.isDefault == '1'">（正在使用）</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 其他信息 -->
      <div class="haruyuki-flex-space-between haruyuki-align-items-center" v-if="basicData.serviceAuditStatus == 2">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-set-up"></i><span class="haruyuki-ml-6">其他信息</span>
        </div>
      </div>
      <div class="haruyuki-content" v-if="basicData.serviceAuditStatus == 2">
        <el-button type="primary" size="small" @click="infoChange">信息变更</el-button>
        <el-button type="primary" size="small" v-if="isStartNode && permission.service_pwd" @click="passEdit()">重置密码</el-button>
        <el-button type="primary" size="small" v-if="isStartNode && permission.service_pwd_sms" @click="noteEdit()">重发密码短信</el-button>
        <el-button type="primary" size="small" @click="openQx">权限变更</el-button>
      </div>
    </section>
    <!-- 编辑 -->
    <el-dialog :title="'修改' + dialogText" append-to-body :close-on-click-modal="false" :visible.sync="dialogVisible" :before-close="handleClose">
      <template>
        <div class="el-dialog-div" v-show="active == 0">
          <basic-form :basicForm="basicForm" ref="toBasicForm" />
        </div>
      </template>
      <template>
        <div v-if="active == 1">
          <main-form :mainForm="mainForm" :serviceType="basicData.serviceType" ref="toMainForm" />
          <el-alert v-if="mainForm.auditRemark" title="审核备注：" :description="mainForm.auditRemark" type="error">
          </el-alert>
        </div>
      </template>
      <template>
        <div v-if="active == 2">
          <card-form :cardForm="cardForm" :serviceType="basicData.serviceType" ref="toCardForm" />
          <el-alert v-if="cardForm.auditRemark" title="审核备注：" :description="cardForm.auditRemark" type="error">
          </el-alert>
        </div>
      </template>
      <template>
        <div v-if="active == 3">
          <el-transfer class="haruyuki-width-100 haruyuki-flex-center" filterable :filter-method="filterMethod" filter-placeholder="请输入通道名称" :button-texts="['取消分配', '分配通道']" :titles="['未分配通道', '已分配通道']" v-model="aisleAllot" :data="aisleData">
          </el-transfer>
        </div>
      </template>
      <template>
        <div v-if="active == 4">
          <policy-form :oem="service" :aisleCodeList="aisleAllot" ref="toPolicyForm" />
        </div>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button icon="el-icon-check" size="small" type="primary" v-preventClick @click.stop="handleSubmit">提 交</el-button>
      </span>
    </el-dialog>
    <!-- 菜单-机构数 -->
    <el-dialog v-if="policyVisible" top="1%" :title="labelData.policyTitle" append-to-body :visible.sync="policyVisible">
      <template>
        <!-- <policy-form :oem="service" :aisleCode="aisleCode" ref="toPolicyForm" /> -->
        <policy-form :oem="service" :aisleCodeList="aisleAllot" ref="toPolicyForm" />
      </template>
      <span slot="footer" class="dialog-footer" v-if="isStartNode">
        <el-button icon="el-icon-check" size="small" type="primary" v-preventClick @click.stop="getPolicyEditForm" v-if="basicData.parentServiceNo === '0'">提 交</el-button>
      </span>
    </el-dialog>
    <!-- 修改密码 -->
    <el-dialog v-if="passVisible" title="修改密码" append-to-body width="550px" :visible.sync="passVisible" :before-close="handlePassClose">
      <template>
        <passForm :passForm="passForm" ref="toPassForm" />
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button icon="el-icon-check" size="small" type="primary" v-preventClick @click.stop="getPassUpdate">提 交</el-button>
      </span>
    </el-dialog>
    <!-- 变更信息 -->
    <el-dialog v-if="infoVisible" title="认证信息变更" append-to-body top="80px" :visible.sync="infoVisible" :before-close="handleInfoClose">
      <div>
        <!-- 变更类型 -->
        <div class="infoWrap_line">
          <span class="info_line_span">变更类型：</span>
          <el-select class="w100" size="small" v-model="infoObj.type" @change="typeOptionChange" placeholder="请选择变更类型">
            <el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">
            </el-option>
          </el-select>
        </div>
        <!-- 认证主体变更 -->
        <div v-if="infoObj.type == '0'">
          <!-- <div v-if="basicData.serviceAuditStatus == 2"> -->
          <div v-if="typeOption[parseInt(infoObj.type)].isShow">
            <div class="infoWrap_line">
              <span class="info_line_span">服务商类型：</span>
              <el-select class="w100" size="small" v-model="infoObj.serviceType" placeholder="请选择服务商类型">
                <el-option v-for="item in infoObj.serviceTypeList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey">
                </el-option>
              </el-select>
            </div>
            <main-form :mainForm="mainForm" :serviceType="infoObj.serviceType" ref="toMainForm" />
          </div>
          <!-- <div v-else>{{basicData.serviceAuditStatusName}}</div> -->
          <!-- <div class="nullData" v-else>认证主体变更审核中</div> -->
        </div>
        <!-- 结算账户变更 -->
        <div v-if="infoObj.type == '1'">
          <div v-if="typeOption[parseInt(infoObj.type)].isShow">
            <!-- <div class="infoWrap_line">
            <span class="info_line_span">结算账户类型：</span>
            <el-select
              class="w100"
              size="small"
              v-model="infoObj.serviceType"
              placeholder="请选择结算账户类型">
              <el-option
                v-for="item in infoObj.serviceTypeList"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
          </div> -->
            <card-form :cardForm="cardForm" :serviceType="infoObj.serviceType" ref="toCardForm" />
          </div>
        </div>
        <!-- 登录账户变更 -->
        <div v-if="infoObj.type == '2'">
          <el-form v-if="typeOption[parseInt(infoObj.type)].isShow" :model="signInForm" ref="signInForm" :rules="signInFormRules" label-width="160px">
            <el-form-item label="原登录账户" prop="oldMobile">
              <el-input readonly size="small" v-model.number="basicData.contactNumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新登录账户" prop="mobile">
              <el-input size="small" v-model.number="signInForm.mobile" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="smsCode">
              <el-input size="small" v-model.number="signInForm.smsCode" autocomplete="off">
                <template slot="append">
                  <el-button class="btnCode" type="primary" @click="signing()" :disabled="mBtn">
                    <span v-show="!mBtn">获取验证码</span>
                    <span v-show="mBtn">重新发送{{ second }}S</span>
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button icon="el-icon-check" size="small" type="primary" v-preventClick @click.stop="infoSubmit">提 交</el-button>
      </span>
    </el-dialog>
    <!-- 权限变更 -->
    <el-dialog title="权限变更" append-to-body v-dialogDrag :visible.sync="qxVisible" width="400px">
      <el-form size="small" :model="qxForm">
        <el-form-item prop="qxForm" label="权限变更类型">
          <el-select size="small" v-model="qxForm.qxType" placeholder="请选择 权限变更类型">
            <el-option v-for="item in serviceChangeType" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey">
              <span style="float: left">{{ item.dictValue }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.dictKey }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <span class="haruyuki-flex-x-end">
          <el-button size="small" type="primary" v-preventClick @click="qxChange">变更</el-button>
        </span>
      </span>
    </el-dialog>
    <serviceQxChagne ref="serviceQxChagne" :qxType="qxForm.qxType" @resetFun="infoData(serviceId)"/>
  </div>
</template>

<script>
import { getServiceDetail } from "@/api/rb-oem/serviceinfo/service_info_details";
import { update, authUpdate, authUpdateV2, bankUpdate, aisleUpdate, policyUpdate, policyUpdateAll, getAisleOemList, getUpdatePwdBySms, getUpdatePwd } from "@/api/rb-oem/serviceinfo/service_info";
import { mapGetters } from "vuex";
import basicForm from "@/components/rb-service/basic-form";
import mainForm from "@/components/rb-service/main-form";
import cardForm from "@/components/rb-service/card-form";
import policyForm from "@/components/rb-service/policy-form";
import passForm from "@/components/rb-service/pass-form";
import { getDictionary } from "@/api/system/dict";
import serviceQxChagne from "./service-qxChagne";

import { changeAccount, updateServiceAccount } from "@/api/rb-oem/forgetPassword/forgetPassword";
import md5 from 'js-md5';

export default {
  components: {
    basicForm,
    mainForm,
    cardForm,
    policyForm,
    passForm,
    serviceQxChagne
  },
  props: {
    serviceId: {
      type: String,
      required: '',
    },
    isStartNode: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      qxVisible: false,//权限变更
      qxForm: {
        qxType: '0'
      },
      serviceChangeType: [],
      changeTypeStatus: [],
      rangesChange: [],
      labelData: {
        basicTitle: "服务商信息",
        walletTitle: "服务商钱包",
        mainTitle: "实名信息",
        cardTitle: "结算卡信息",
        aisleTitle: "支付通道",
        policyTitle: "通道分润配置",
      },
      dialogVisible: false,
      passVisible: false,
      dialogText: "",
      active: 0,
      policyVisible: false,
      service: {},
      basicData: {
        tenantName: "",
        tenantType: "",
        linkman: "",
        contactNumber: "",
        provinceCityArea: "",
        address: "",
        email: "",
        isCooperate: "",
        profitState: "",
        cooperateState: "",
        exceptionMsg: "",
        domain: "",
        backgroundUrl: "",
      },
      mainData: {},
      cardData: {},
      basicForm: {},
      mainForm: {},
      cardForm: {},
      aisleList: [], //通道列表 显示
      aisleAllot: [], //通道分配 绑定value
      aisleData: [], //通道分配 数据
      aisleCode: "", //点击赋值 通道编号
      passForm: {
        password: "",
        checkPass: ""
      },
      infoVisible: false,//认证信息变更
      infoObj: {
        type: '0',  // 0认证主体变更 1结算账户变更 2登录账户变更
        serviceType: '0',
        serviceTypeList: [],//服务商类型
      },
      typeOption: [
        {
          value: '0',
          label: '认证主体变更',
          disabled: false,
          isShow: false
        }, {
          value: '1',
          label: '结算账户变更',
          disabled: false,
          isShow: false
        }, {
          value: '2',
          label: '登录账户变更',
          disabled: false,
          isShow: false
        }
      ],
      // 登录账户表单
      signInForm: {
        // oldMobile:"",
        // mobile:"",
        // smsCode:""
      },
      signInFormRules: {
        mobile: [
          { required: true, message: '请输入新登录账户' },
          { required: true, pattern: /^1[0-9]{10}$/, message: '登录账户格式不正确', trigger: 'blur' }
        ],
        smsCode: [
          { required: true, message: '请输入验证码', trigger: ['blur', 'change'] },
          { required: true, pattern: /^\d{6}$/, message: '验证码长度在6个字符', trigger: 'blur' }
        ]
      },
      mBtn: false,
      second: 0,
      timer: null,
      timeStamp: '',
      sign: '',
      roaCardHeldFileList: [],//法人手持身份证
    };
  },
  computed: {
    ...mapGetters(["permission", 'userInfo', 'tenantId']),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.service_info_add, false),
        viewBtn: this.vaildData(this.permission.service_info_view, false),
        delBtn: this.vaildData(this.permission.service_info_delete, false),
        editBtn: this.vaildData(this.permission.service_info_edit, false),
        menuBtn: this.vaildData(this.permission.service_menu, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    exhibition() {
      return (val) => {
        if (val == "" || val == "-1") {
          return (val = 0);
        } else {
          return val;
        }
      };
    },
    getYearMonth() {
      return (date) => {
        let result = (date + '').split(' ');
        return result[0];
      }
    }
  },
  created() {
    this.doGetDicts();
    this.infoData(this.serviceId);
  },
  methods: {
    // 权限
    openQx() {
      this.qxForm.qxType = '';
      this.qxVisible = true;
    },
    // 权限变更
    qxChange() {
      if (this.qxForm.qxType) {
        this.qxVisible = false;//权限变更
        let param = {
          serviceNo:this.basicData.serviceNo,
          changeType:this.qxForm.qxType
        }
        // 变更类型 1.登录权限 2.提现权限 3.开户权限
        if(this.qxForm.qxType=='1'){
          param.afterStatus = this.basicData.loginStatus+''
          this.$refs.serviceQxChagne.init(param)
        }else if(this.qxForm.qxType=='2'){
          param.afterStatus = this.basicData.withdrawStatus+''
          this.$refs.serviceQxChagne.init(param)
        }else if(this.qxForm.qxType=='3'){
          param.afterStatus = this.basicData.openMerchantStatus+''
          this.$refs.serviceQxChagne.init(param)
        }
      } else {
        this.$message.error('请选择权限变更类型');
      }
    },
    /* 获取验证码 */
    signing() {
      // 发送验证码 API
      // 获取时间戳
      this.timeStamp = Date.now();
      // RuiSY+时间戳+手机号 md5加密 传sign
      this.sign = md5('RuiSY' + this.timeStamp + this.signInForm.mobile);
      let param = {
        smsCodeType: '7',
        mobile: this.signInForm.mobile,
        sign: this.sign,
        timeStamp: this.timeStamp,
        tenantId: this.tenantId
      }
      changeAccount(param).then(() => { }, error => {
        window.console.log(error);
        this.mBtn = false;
        clearInterval(this.timer);
        this.timer = null;
        this.signInForm.code = "";
      })
      // 发送验证码倒计时
      if (!this.timer) {
        this.second = 90;
        this.mBtn = true;
        this.timer = setInterval(() => {
          if (this.second > 0 && this.second <= 90) {
            this.second--;
          } else {
            this.mBtn = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    // 变更主体--提交
    infoSubmit() {
      const _this = this;
      switch (_this.infoObj.type) {
        case '0':
          _this.infoMainEditForm();
          break;
        case '1':
          _this.infoCardEditForm();
          break;
        case '2':
          _this.postAccount();
          break;
      }
    },
    // 修改账户
    postAccount() {
      this.$refs["signInForm"].validate((valid) => {
        if (valid) {
          let param = {
            oldMobile: this.basicData.contactNumber,
            newMobile: this.signInForm.mobile,
            smsCode: this.signInForm.smsCode,
            userNo: this.basicData.userNo
          }
          updateServiceAccount(param).then(() => {
            this.infoData(this.serviceId);
            this.infoVisible = false;
          }), (error) => {
            window.console.log(error);
          }
        } else {
          return false;
        }
      })
    },
    // 更改实名认证
    infoMainEditForm() {
      this.$refs["toMainForm"].$refs["mainForm"].validate((valid) => {
        if (valid) {
          this.mainForm.id = "";
          this.mainForm.userCate = this.infoObj.serviceType;
          const formData = {
            ...this.mainForm,
          };
          authUpdateV2(formData).then(
            (res) => {
              if (res.data.code == "200") {
                this.infoData(this.serviceId);
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.infoVisible = false;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            },
            (error) => {
              window.console.log(error);
            }
          );
        } else {
          return false;
        }
      });
    },
    // 更改结算卡
    infoCardEditForm() {
      this.$refs["toCardForm"].$refs["cardForm"].validate((valid) => {
        if (valid) {
          this.cardForm.id = "";
          if (this.cardForm.provinceCityArea) {
            this.cardForm.province = this.cardForm.provinceCityArea[0];
            this.cardForm.city = this.cardForm.provinceCityArea[1];
            this.cardForm.area = this.cardForm.provinceCityArea[2];
          }
          const formData = {
            ...this.cardForm,
          };
          bankUpdate(formData).then((res) => {
            if (res.data.code == "200") {
              this.infoData(this.serviceId);
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.infoVisible = false;
            } else {
              this.$message({
                type: "error",
                message: res.data.message,
              });
            }
          },
            (error) => {
              window.console.log(error);
            });
        } else {
          return false;
        }
      });
    },
    // 变更主体
    typeOptionChange(value) {
      this.typeOption[2].isShow = false;
      this.infoObj.serviceType = this.basicData.serviceType;//服务商类型

      if (value == '0') {
        this.typeOption[0].isShow = false;

        this.infoMainEdit(this.mainData);
      } else if (value == '1') {
        this.typeOption[1].isShow = false;

        this.infoCardEdit(this.cardData);
      } else {
        this.typeOption[2].isShow = true;
      }
    },
    // 信息变更--弹框关闭前回调
    handleInfoClose(done) {
      // this.infoObj.type = '';
      this.signInForm = {};
      this.typeOption[0].isShow = false;
      this.typeOption[1].isShow = false;
      this.typeOption[2].isShow = false;
      done()
    },
    // 信息变更--弹框打开
    infoChange() {
      this.infoObj.serviceType = this.basicData.serviceType;
      this.signInForm.oldMobile = this.userInfo.account;

      // settlementMode 结算状态:   1 日结 2月结
      // isBankAuth     结算卡:     0 未认证 1 已认证
      // isAuth         实名认证:   0 未认证 1 已认证
      // serviceType    服务商类型: 0个人 1一般纳税人 2小规模经营

      if (this.basicData.isBankAuth == 0) {
        this.typeOption[1].disabled = true;
      }

      this.infoVisible = true;

      if (this.basicData.isAuth == 0) {
        this.infoObj.type = "";
        this.typeOption[0].disabled = true;
      } else {
        this.infoObj.type = "0";
        this.typeOption[0].isShow = true;
        this.infoMainEdit(this.mainData);
      }
    },
    // 实名认证信息--更改--回显
    infoMainEdit(mainData) {
      this.mainForm = JSON.parse(JSON.stringify(mainData));
      this.mainForm.userNo = this.service.userNo;
      this.typeOption[0].isShow = true;

      this.$nextTick(() => {
        this.$refs["toMainForm"].roaLicenseFileList.length == 0 &&
          this.mainForm.roaLicenseImageUrl
          ? this.$refs["toMainForm"].roaLicenseFileList.push({
            url: this.mainForm.roaLicenseImageUrl || "",
          })
          : this.$refs["toMainForm"].roaLicenseFileList;
        this.$refs["toMainForm"].roaPositiveFileList.length == 0 &&
          this.mainForm.roaCardPositiveUrl
          ? this.$refs["toMainForm"].roaPositiveFileList.push({
            url: this.mainForm.roaCardPositiveUrl || "",
          })
          : this.$refs["toMainForm"].roaPositiveFileList;
        this.$refs["toMainForm"].roaCardBackFileList.length == 0 &&
          this.mainForm.roaCardBackUrl
          ? this.$refs["toMainForm"].roaCardBackFileList.push({
            url: this.mainForm.roaCardBackUrl || "",
          })
          : this.$refs["toMainForm"].roaCardBackFileList;

        this.$refs["toMainForm"].roaCardHeldFileList.length == 0 &&
          this.mainForm.roaCardHeldUrl
          ? this.$refs["toMainForm"].roaCardHeldFileList.push({
            url: this.mainForm.roaCardHeldUrl || "",
          })
          : this.$refs["toMainForm"].roaCardHeldFileList;
      });
    },
    // 结算卡信息--更改--回显
    infoCardEdit(cardData) {
      this.cardForm = JSON.parse(JSON.stringify(cardData));
      this.cardForm.userNo = this.service.userNo;
      this.typeOption[1].isShow = true;

      this.$nextTick(() => {
        // --1
        this.$refs["toCardForm"].robBankFileList.length == 0 &&
          this.cardForm.robBankPositiveUrl
          ? this.$refs["toCardForm"].robBankFileList.push({
            url: this.cardForm.robBankPositiveUrl || "",
          })
          : this.$refs["toCardForm"].robBankFileList;
        //--2
        this.$refs["toCardForm"].robBackFileList.length == 0 &&
          this.cardForm.robBankBackUrl
          ? this.$refs["toCardForm"].robBackFileList.push({
            url: this.cardForm.robBankBackUrl || "",
          })
          : this.$refs["toCardForm"].robBackFileList;
        //--3
        this.$refs["toCardForm"].robCardFileList.length == 0 &&
          this.cardForm.robCardPublicImgUrl
          ? this.$refs["toCardForm"].robCardFileList.push({
            url: this.cardForm.robCardPublicImgUrl || "",
          })
          : this.$refs["toCardForm"].robCardFileList;
      });
    },
    /* 字典 */
    doGetDicts() {
      getDictionary({ code: "service_type" }).then((res) => {
        this.infoObj.serviceTypeList = res.data.data;
      });
      // 服务商权限变更类型
      getDictionary({ code: "service_qx_type" }).then((res) => {
        this.serviceChangeType = res.data.data;
      });
    },
    /* 页面加载 初始化请求详情接口 */
    infoData(id) {
      getServiceDetail(id).then((res) => {
        this.service = {
          userNo: res.data.data.baseInfo.userNo,
          userType: "2"
        };
        res.data.data.baseInfo.serviceType = res.data.data.baseInfo.serviceType + "";
        res.data.data.baseInfo.settlementMode = res.data.data.baseInfo.settlementMode + "";
        res.data.data.baseInfo.isCooperate = res.data.data.baseInfo.isCooperate + "";
        res.data.data.baseInfo.cooperateState = res.data.data.baseInfo.cooperateState + "";
        res.data.data.baseInfo.profitState = res.data.data.baseInfo.profitState + "";
        this.basicData = res.data.data.baseInfo;
        this.basicData.provinceCityArea = [
          this.basicData.province,
          this.basicData.city,
          this.basicData.area,
        ];

        this.mainData = res.data.data.authInfo;
        this.cardData = res.data.data.bankInfo;
        // 结算卡省市区
        this.cardData.provinceCityArea = [
          this.cardData.province,
          this.cardData.city,
          this.cardData.area
        ];
        this.aisleList = res.data.data.aisleInfos;
      });
    },
    /* OEM编辑弹框 提交处理 */
    handleSubmit() {
      const _this = this;
      switch (_this.active) {
        case 0:
          _this.getBasicEditForm();
          break;
        case 1:
          _this.getMainEditForm();
          break;
        case 2:
          _this.getCardEditForm();
          break;
        case 3:
          _this.getAislePolicyEditForm();
          // _this.getAisleEditForm();
          break;
        case 4:
          _this.getPolicyEditAllForm();
          break;
      }
    },
    /**
     * @func 关闭服务商信息弹窗
     * @desc 点击关闭的回调
     * @param {Function} done - 完成的回调
     * */
    handleClose(done) {
      this.emptyForm();
      done();
    },
    /**
     * @func 关闭密码弹窗
     * @desc 点击关闭的回调
     * @param {Function} done - 完成的回调
     * */
    handlePassClose(done) {
      this.$refs["toPassForm"].$refs["passForm"].resetFields();
      done();
    },
    emptyForm() {
      switch (this.active) {
        case 0:
          this.$refs["toBasicForm"].$refs["basicForm"].resetFields();
          break;
        case 1:
          this.$refs["toMainForm"].$refs["mainForm"].resetFields();
          this.$refs["toMainForm"].roaLicenseFileList = [];
          this.$refs["toMainForm"].roaPositiveFileList = [];
          this.$refs["toMainForm"].roaCardBackFileList = [];
          this.$refs["toMainForm"].roaCardHeldFileList = [];
          break;
        case 2:
          this.$refs["toCardForm"].$refs["cardForm"].resetFields();
          this.$refs["toCardForm"].robBankFileList = [];
          this.$refs["toCardForm"].robBackFileList = [];
          this.$refs["toCardForm"].robCardFileList = [];
          break;
        case 3:
          this.aisleData = [];
          this.aisleAllot = [];
          break;
      }
      // this.$refs["toBasicForm"].$refs["basicForm"].resetFields();
      // // this.$refs['toMainForm'].$refs['mainForm'].resetFields();
      // // this.$refs['toCardForm'].$refs['cardForm'].resetFields();
      // this.aisleData = [];
      // this.aisleAllot = [];
    },
    /* 手动修改密码 */
    passEdit() {
      this.passVisible = true;
    },
    /* 提交手动修改密码 */
    getPassUpdate() {
      this.$refs["toPassForm"].$refs["passForm"].validate((valid) => {
        if (valid) {
          getUpdatePwd(this.service.userNo, this.passForm.password).then(
            (res) => {
              if (res.data.code == "200") {
                this.infoData(this.serviceId);
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.$refs["toPassForm"].$refs["passForm"].resetFields();
                this.passVisible = false;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            },
            (error) => {
              window.console.log(error);
            }
          );
        } else {
          return false;
        }
      });
    },
    /* 短信修改密码 */
    noteEdit() {
      this.$confirm(`是否发送短信修改当前服务商的密码?`, "短信修改密码", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          getUpdatePwdBySms(this.service.userNo).then(
            (res) => {
              if (res.data.code == "200") {
                this.infoData(this.serviceId);
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            },
            (error) => {
              window.console.log(error);
            }
          );
        })
        .catch(() => { });
    },
    /* 点击基础信息 处理回显数据 */
    getBasicEdit(basicData) {
      this.active = 0;
      this.basicForm = JSON.parse(JSON.stringify(basicData));
      this.dialogText = this.labelData.basicTitle;
      this.dialogVisible = true;
    },
    /* 基础信息 提交修改 */
    getBasicEditForm() {
      this.$refs["toBasicForm"].$refs["basicForm"].validate((valid) => {
        if (valid) {
          this.basicForm.province = this.basicForm.provinceCityArea[0];
          this.basicForm.city = this.basicForm.provinceCityArea[1];
          this.basicForm.area = this.basicForm.provinceCityArea[2];
          update(this.basicForm).then(
            (res) => {
              if (res.data.code == "200") {
                this.infoData(this.serviceId);
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.dialogVisible = false;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            },
            (error) => {
              window.console.log(error);
            }
          );
        } else {
          return false;
        }
      });
    },
    /* 点击实名信息 处理回显数据 */
    getMainEdit(mainData) {
      this.active = 1;
      this.mainForm = JSON.parse(JSON.stringify(mainData));
      this.mainForm.userNo = this.service.userNo;
      this.dialogText = this.labelData.mainTitle;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["toMainForm"].roaLicenseFileList.length == 0 &&
          this.mainForm.roaLicenseImageUrl
          ? this.$refs["toMainForm"].roaLicenseFileList.push({
            url: this.mainForm.roaLicenseImageUrl || "",
          })
          : this.$refs["toMainForm"].roaLicenseFileList;
        this.$refs["toMainForm"].roaPositiveFileList.length == 0 &&
          this.mainForm.roaCardPositiveUrl
          ? this.$refs["toMainForm"].roaPositiveFileList.push({
            url: this.mainForm.roaCardPositiveUrl || "",
          })
          : this.$refs["toMainForm"].roaPositiveFileList;
        this.$refs["toMainForm"].roaCardBackFileList.length == 0 &&
          this.mainForm.roaCardBackUrl
          ? this.$refs["toMainForm"].roaCardBackFileList.push({
            url: this.mainForm.roaCardBackUrl || "",
          })
          : this.$refs["toMainForm"].roaCardBackFileList;
        // 法人手持身份证 
        this.$refs["toMainForm"].roaCardHeldFileList.length == 0 &&
          this.mainForm.roaCardHeldUrl
          ? this.$refs["toMainForm"].roaCardHeldFileList.push({
            url: this.mainForm.roaCardHeldUrl || "",
          })
          : this.$refs["toMainForm"].roaCardHeldFileList;
      });
    },
    /* 实名信息 提交修改 */
    getMainEditForm() {
      this.$refs["toMainForm"].$refs["mainForm"].validate((valid) => {
        if (valid) {
          const formData = {
            ...this.mainForm,
          };
          authUpdate(formData).then(
            (res) => {
              if (res.data.code == "200") {
                this.infoData(this.serviceId);
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.dialogVisible = false;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            },
            (error) => {
              window.console.log(error);
            }
          );
        } else {
          return false;
        }
      });
    },
    /* 点击结算卡信息 处理回显数据 */
    getCardEdit(cardData) {
      if (this.mainData.roaCardNo) {
        this.dialogVisible = true;
        this.dialogText = this.labelData.cardTitle;
        this.active = 2;
        this.cardForm = JSON.parse(JSON.stringify(cardData));
        this.cardForm.userNo = this.service.userNo;

        if (this.basicData.serviceType == 0) {
          this.cardForm.robBankName = this.mainData.roaName;
        } else {
          this.cardForm.robBankName = this.mainData.compName;
        }

        this.$nextTick(() => {
          // --1
          this.$refs["toCardForm"].robBankFileList.length == 0 &&
            this.cardForm.robBankPositiveUrl
            ? this.$refs["toCardForm"].robBankFileList.push({
              url: this.cardForm.robBankPositiveUrl || "",
            })
            : this.$refs["toCardForm"].robBankFileList;
          // --2
          this.$refs["toCardForm"].robBackFileList.length == 0 &&
            this.cardForm.robBankBackUrl
            ? this.$refs["toCardForm"].robBackFileList.push({
              url: this.cardForm.robBankBackUrl || "",
            })
            : this.$refs["toCardForm"].robBackFileList;
          // --3
          this.cardForm.robCardPublicImgUrl ? this.$refs["toCardForm"].robCardFileList.push({
            url: this.cardForm.robCardPublicImgUrl || "",
          })
            : this.$refs["toCardForm"].robCardFileList;
        });
      } else {
        this.$message({
          message: '请先完成实名认证，在编辑结算卡信息',
          type: 'warning'
        });
      }
    },
    /* 结算卡信息 提交修改 */
    getCardEditForm() {
      this.$refs["toCardForm"].$refs["cardForm"].validate((valid) => {
        if (valid) {
          if (this.cardForm.provinceCityArea) {
            this.cardForm.province = this.cardForm.provinceCityArea[0];
            this.cardForm.city = this.cardForm.provinceCityArea[1];
            this.cardForm.area = this.cardForm.provinceCityArea[2];
          }

          const formData = {
            ...this.cardForm,
          };
          bankUpdate(formData).then(
            (res) => {
              if (res.data.code == "200") {
                this.infoData(this.serviceId);
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.dialogVisible = false;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            },
            (error) => {
              window.console.log(error);
            }
          );
        } else {
          return false;
        }
      });
    },
    /* 点击支付通道修改 处理回显数据 */
    getAisleEdit(aisleList) {
      this.aisleData = [];
      this.aisleAllot = [];
      this.active = 3;
      this.dialogText = this.labelData.aisleTitle;
      this.dialogVisible = true;
      getAisleOemList("-1", "-1").then((res) => {
        let aisleData = res.data.data.records;
        aisleData.forEach((item, index) => {
          this.aisleData.push({
            label: item.aisleName,
            key: item.aisleCode,
            pinyin: item.aisleName[index],
          });
        });
      });
      aisleList.forEach((item) => {
        this.aisleAllot.push(item.aisleCode);
      });
      // this.$nextTick(() => {
      // });
    },
    /* 支付通道信息 提交进入 政策信息 */
    getAislePolicyEditForm() {
      if (this.aisleAllot.length > 0) {
        this.active = 4;
      } else {
        this.$message({
          type: "warning",
          message: "请先选择通道!",
        });
      }
    },
    /* 支付通道信息 提交修改 */
    getAisleEditForm() {
      if (this.aisleAllot.length > 0) {
        let aisleDatas = {
          aisleCodes: this.aisleAllot,
          ...this.service,
        };
        aisleUpdate(aisleDatas).then(
          (res) => {
            if (res.data.code == "200") {
              this.infoData(this.serviceId);
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.aisleData = [];
              this.aisleAllot = [];
              this.dialogVisible = false;
            } else {
              this.$message({
                type: "error",
                message: res.data.message,
              });
            }
          },
          (error) => {
            window.console.log(error);
          }
        );
      } else {
        this.$message({
          type: "warning",
          message: "请先选择通道!",
        });
      }
    },
    /* 点击某项支付通道 处理分润政策回显数据 */
    getPolicyEdit(code) {
      this.aisleAllot = [];
      /* if (code) {
        this.aisleCode = code;
      } else {
        this.aisleCode = "";
      } */

      if (code) {
        this.aisleAllot.push(code);
      } else {
        this.aisleAllot = [];
      }

      // this.active = 4;
      this.policyVisible = true;
    },
    /* 支付通道信息 提交修改 */
    getPolicyEditForm() {
      let policyDatas = {
        policyList: this.$refs["toPolicyForm"].data,
        ...this.service,
      };
      policyUpdate(policyDatas).then(
        (res) => {
          if (res.data.code == "200") {
            this.infoData(this.serviceId);
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.policyVisible = false;
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        },
        (error) => {
          window.console.log(error);
        }
      );
    },
    /* 全部支付通道信息 提交修改 */
    getPolicyEditAllForm() {
      let policyDatas = {
        policyList: this.$refs["toPolicyForm"].data,
        ...this.service,
      };
      policyUpdateAll(policyDatas).then(
        (res) => {
          if (res.data.code == "200") {
            this.infoData(this.serviceId);
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.dialogVisible = false;
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        },
        (error) => {
          window.console.log(error);
        }
      );
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.el-transfer-panel__list.is-filterable {
  width: 400px !important;
  height: 500px !important;
}

/deep/.el-transfer-panel {
  width: 400px !important;
  height: 500px !important;
}

.picture-preview {
  color: #409eff;
  cursor: pointer;
}

.haruyuki-image-preview {
  width: 260px;
}

.image-preview-title {
  // text-align: center;
  margin-bottom: 10px;
}

.haruyuki-image-preview .haruyuki-image .el-image {
  border-radius: 10px;
}

/deep/ .el-image__error {
  background: #fff;
}

.infoWrap_line {
  display: flex;
  align-items: center;
  padding-bottom: 30px;

  .info_line_span {
    width: 160px;
    text-align: right;
  }
}

.nullData {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}

.w100 {
  width: calc(100% - 160px);
}

.btnCode {
  width: 100px;
  border-radius: 0;
  padding: 0;
  margin: 10px 0;
  background: #409eff !important;
}

.btnCode:hover {
  padding: 0;
  border: none;
  background: #409eff !important;
}

/deep/ .el-input-group__append {
  background: #409eff !important;
  color: #fff !important;
  padding: 0;
}
</style>